<template>
    <div class="show-pc">
        <div class="works_item">
            <div class="title">我的收藏</div>

            <div class="selector-wrapper">
                <div class="selector-container" :style="{ maxWidth: '100%' }">
                    <div v-for="item in menuItems" :key="item.columnId" class="menu-item"
                        :class="{ 'active': activeKey === item.columnId }" @click="handleSelect(item.columnId)">
                        {{ item.columnName }}
                    </div>
                </div>
            </div>

        </div>
        <div class="WaterfallFlow_item" style="padding-bottom: 50px;">
            <Waterfall :col="3" :data-source="list" :show-icon="false" :dataStatus="dataStatus" :loading="loading">
                <template #default="{ item }">
                    <Card :item />
                </template>
            </Waterfall>
        </div>
    </div>
    <!-- 手机 -->
    <div class="show-wap">
        <div class="works_item-wap">
            <div class="selector-container-wap">
                <div v-for="item in menuItems" :key="item.columnId" class="menu-item-wap"
                    :class="{ 'active': activeKey === item.columnId }" @click="handleSelect(item.columnId)">
                    {{ item.columnName }}
                </div>
            </div>
        </div>
        <div class="WaterfallFlow_item">
            <Waterfall :col="3" :data-source="list" :show-icon="false" :dataStatus="dataStatus" :loading="loading">
                <template #default="{ item }">
                    <Card :item />
                </template>
            </Waterfall>
        </div>
    </div>

    <UploadWorks ref="UploadWorksRef" @editOk="editOk" @delOk="delOk"></UploadWorks>
</template>

<script setup>
import { useHttp } from '@/api/http'
import UploadWorks from '@/components/uploadWorks/index.vue';
import { ref } from 'vue'
const UploadWorksRef = ref(null)
const WaterfallRef = ref(null)

// 定义接收的props
const props = defineProps({
    userData: {
        type: Object,
        required: true
    },
    config: {
        type: Object,
        default: () => ({})
    }
})
const activeKey = ref('')
const menuItems = ref([
    { columnId: '', columnName: '全部', },
 

]);
const handleSelect = (key) => {
    queryParams.value.pageNo = 1
    activeKey.value = key
    queryParams.value.columnId = key
    list.value = []
    dataStatus.value = true
    getMyList()

}

// 栏目标题
const getMenuItems = () => {
    useHttp.get('/web/my/myCollectColumnList').then(res => {
        menuItems.value.push(...res.result)
    }).catch(err => {
    })
}
getMenuItems()

const list = ref([])
const queryParams = ref({
    pageNo: 1,
    pageSize: 15,
})
const dataStatus = ref(true)
const loading = ref(false)
const indexNum = ref(0)
const getMyList = () => {

    if (!dataStatus.value || loading.value) return
    loading.value = true
    useHttp.get(`/web/my/myCollectList`, queryParams.value).then(res => {
        loading.value = false
        // if(indexNum.value === 1) {
        //     setTimeout(() => {
        //         loadData()
        //     }, 500);
        // }
        list.value.push(...res.result.records)
        if (res.result.records.length < queryParams.value.pageSize) {
            dataStatus.value = false
            console.log(dataStatus.value, "1111111");


        }
    })
}

getMyList()



const editOk = (e) => {
    WaterfallRef.value.changeData(e)
}

const delOk = (e) => {
    WaterfallRef.value.delData(e)
}


// 加载数据
const loadData = () => {
    if (list.value.length === 0) return
    queryParams.value.pageNo += 1
    getMyList()
}

// 素材
const openEdit = (item, index) => {
    UploadWorksRef.value.edit(item, index)
}

// 重新获取数据
const resetGetData = () => {
    queryParams.value.pageNo = 1
    list.value = []
    getMyList()
}


</script>


<style lang="less" scoped>
.works_item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px;
    margin-bottom: 2.6vw;

    .title {
        color: var(--color-text);
        font-size: var(--text-22);
        white-space: nowrap;
    }

    .selector-wrapper {
        flex: 1;
        display: block;
        min-width: 0;
        overflow-x: auto;

        .selector-container {
            width: 100%;
            display: flex;
            border-radius: 8px;
            overflow-x: auto;
            white-space: nowrap;
            gap: 8px;
            margin-top: 0.52vw;
            padding-bottom: 0.52vw;

            &::-webkit-scrollbar {
                display: block;
                height: 4px;
            }

            &::-webkit-scrollbar-track {
                background-color: #f5f5f5;
                border-radius: 2px;

            }

            &::-webkit-scrollbar-thumb {
                background-color: #d0d0d0;
                border-radius: 2px;
            }

            &::-webkit-scrollbar-thumb:hover {
                background-color: #b0b0b0;
            }

            .menu-item {
                flex-shrink: 0;
                min-width: 80px;
                padding: 0 16px;
                height: 36px;
                line-height: 36px;
                font-size: var(--text-16);
                color: #787a7e;
                cursor: pointer;
                white-space: nowrap;
                border-radius: 4px;
                transition: all 0.3s;

                &.active {
                    background-color: var(--ba-color-sel);
                    color: var(--color-text-3);
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
                }

                &:hover {
                    color: #333;
                }
            }
        }
    }
}

.works_item-wap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0px;
    overflow: hidden;
    width: 100%;

    .title-wap {

        font-size: 18px;
        color: red;
    }

    .selector-container-wap {
        display: flex;
        border-radius: 8px;
        width: 100%;
        min-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        overflow-x: auto;
        scrollbar-width: none;

    }

    .selector-container-wap::-webkit-scrollbar {
        display: none;
    }

    .menu-item-wap {
        padding: 0 10px;
        white-space: nowrap;
        font-size: 16px;
        color: #787a7e;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        text-align: center;
        line-height: 33px;
        flex-shrink: 0;
        /* 防止菜单项被压缩 */
    }

    .menu-item-wap.active {
        text-align: center;
        line-height: 33px;
        border-radius: 4px;
        background-color: var(--ba-color-sel);
        color: var(--color-text-3);
    }
}
</style>